import "./morecollocation.css"
import React, { useState } from 'react'
import { Link, useNavigate } from "react-router-dom"
import { getFoodsData, getSomeFoods } from "../../api/home"
import { Popup, Space, Button } from 'antd-mobile'


function Morecollocation() {
    let navigate = useNavigate();//链接跳转
    let [foods, setFoods] = React.useState([]);
    let [types, setTypes] = React.useState(null);//食材类型

    let [visible4, setVisible4] = useState(false);

    let [visible5, setVisible5] = useState(false)

    let [tabs, setTabs] = useState(0);

    let [addFlag, SetaddFlag] = React.useState(true)

    // 底部显示隐藏
    let [display, editDisplay] = useState(true)
    let [displays, editDisplays] = useState(false)

    // 菜谱数据
    let [someFoods, SetSomeFoods] = React.useState(null)

    let [FoodsNum, EditNum] = React.useState(false)

    // 选择食材ID
    let [FoodId, setFoodId] = React.useState([]);
    let [FoodName, setFoodName] = React.useState([]);

    //请求数据 食材
    React.useEffect(() => {
        getFoodsData().then(data => {
            // setFoods(data.data.data[0].data)

            setTypes(data.data.data)
            // console.log(data.data.data);
            let arr = []
            for (var i = 0; i < data.data.data[0].data.length; i++) {
                arr = Object.assign({}, data.data.data[0].data[i], {
                    checked: false,
                });
                foods.push(arr)
                // console.log(arr);
                setFoods(foods)
                // console.log(foods);

            }


            // console.log(data.data.data[0].data);
        })


    }, [])

    function getData(id) {

        getFoodsData(id).then(data => {
            // console.log(data.data.data);
            // setFoods(data.data.data[id].data)
            let arr = []
            let arrs = []

            for (var i = 0; i < data.data.data[id].data.length; i++) {
                arr = Object.assign({}, data.data.data[id].data[i], {
                    checked: false,
                });
                arrs.push(arr)
                // console.log(arr);
                setFoods(arrs)
                // console.log(foods) ; 
                FoodId.map(item => {
                    arrs.map(item1 => {
                        if (item.id == item1.id) {
                            item1.checked = true
                        }
                    })
                })

            }
        })
    }

    const getId = (id, index, name) => {

        console.log(id);
        // if (FoodId.length > 0 ) {
        //     FoodId.map(item => {
        //         console.log(item == id);
        //         if (item == id) {
        //             FoodId = FoodId.filter(item => item != id)
        //             setFoodId(FoodId)

        //         } else if (item != id) {
        //             FoodId.push(id)
        //             setFoodId(FoodId)
        //             // if(FoodId.length > 3){break}

        //         }
        //         let arr = FoodId.slice(0, 3)
        //         setFoodId(arr)

        //         console.log(FoodId);


        //     })
        // } else if (FoodId.length == 0) {
        //     FoodId.push(id)
        //     setFoodId(FoodId)
        // }

        if (foods[index].checked == true) {
            FoodId = FoodId.filter(item => item.id != id)
            setFoodId(FoodId)
            FoodName = FoodName.filter(item => item != id)
            setFoodName(FoodName)
            SetaddFlag(true)

        } else {

            if (FoodId.length >= 3) {
                console.log("最多三个");


            } else {
                FoodId.push({ id, name })
                setFoodId(FoodId)
                FoodName.push(id)
                setFoodName(FoodName)
            }
            if (FoodId.length > 2) {
                SetaddFlag(false)
            }
        }
        // 底部判断
        if (FoodId.length > 0) {
            editDisplay(false)
            editDisplays(true)

        } else {
            editDisplay(true)
            editDisplays(false)

        }

        // 弹出层判断
        if (FoodId.length > 1 && FoodId.length <= 3) {
            let num = window.encodeURIComponent(FoodName)
            let nums = window.decodeURIComponent(num)
            // console.log(num);
            // console.log(FoodName);
            // console.log(nums);
            getSomeFoods(nums).then(data => {
                console.log(data.data);

                SetSomeFoods(data.data)

            })
            setVisible5(true)
            editDisplays(false)

        } else {
            setVisible5(false)


        }




        getFoodsData().then(data => {
            // setFoods([])

            let arr = []
            let arrs = []
            for (var i = 0; i < data.data.data[tabs].data.length; i++) {
                arr = Object.assign({}, data.data.data[tabs].data[i], {
                    checked: false,
                });
                arrs.push(arr)


            }
            FoodId.map(item => {
                arrs.map(item1 => {
                    if (item.id == item1.id) {
                        item1.checked = true
                    }
                })
            })
            setFoods(arrs)



        })

    }

    // 删除食材

    const clear = (name, id) => {
        console.log(FoodId);
        console.log(name);
        FoodId = FoodId.filter(item => item.name != name)
        FoodName = FoodName.filter(item => item != id)
        setFoodName(FoodName)

        let num = window.encodeURIComponent(FoodName)
        let nums = window.decodeURIComponent(num)
        getSomeFoods(nums).then(data => {
            console.log(data.data);

            SetSomeFoods(data.data)

        })

        setFoodId(FoodId)
        SetaddFlag(true)

        getFoodsData().then(data => {
            // setFoods([])

            let arr = []
            let arrs = []
            for (var i = 0; i < data.data.data[tabs].data.length; i++) {
                arr = Object.assign({}, data.data.data[tabs].data[i], {
                    checked: false,
                });
                arrs.push(arr)
                // arrs[index].checked = !arrs[index].checked
                // console.log(arr);


            }
            FoodId.map(item => {
                arrs.map(item1 => {
                    if (item.name == item1.text) {
                        item1.checked = true
                    }
                })
            })
            setFoods(arrs)



        })

        if (FoodId.length < 2) {
            setVisible5(false)
            editDisplays(true)

        } else {
            EditNum(true)
        }
        if (FoodId.length == 1) {
            SetSomeFoods(null)
            EditNum(false)

        }
        if (FoodId.length == 0) {
            editDisplay(true)
            editDisplays(false)
            EditNum(false)

        }

    }

    // 切换列表
    const changeId = (id, e) => {
        e.preventDefault();
        // console.log(id);
        getData(id);
        setTabs(id)
        setVisible4(false)

    }

    // 关闭
    const close = () => {
        editDisplays(true)

        setVisible5(false)
        if (FoodId.length > 1) {
            EditNum(true)

        } else {

            EditNum(false)
        }
    }
    const open = () =>{
        setVisible5(true)
        editDisplays(false)

    }

    // +号
    const addFood = () => {
        setVisible5(false)
        editDisplays(true)

        if (FoodId.length > 1) {
            EditNum(true)

        } else {

            EditNum(false)
        }

    }

    return (
        <div className="morecollocation">
            <div className="header">

                <div className="header-wrap">
                    <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                    <div className="title">
                        食材搭配
                    </div>

                </div>

            </div>

            <div className="vegetable">
                <div className="moretype"
                    onClick={() => {
                        setVisible4(true)
                    }}
                >
                    <i className="iconfont icon-zuobian"></i>
                </div>
                <div className="typelists">
                    <Popup
                        visible={visible4}
                        onMaskClick={() => {
                            setVisible4(false)
                        }}
                        position='right'
                        bodyStyle={{ minWidth: '32vw' }}
                    >
                        <div className="top"></div>
                        <ul>
                            {
                                types && types.map((item, index) => {
                                    return (
                                        <li key={index}
                                            onClick={changeId.bind(this, index)}
                                            className={`${index == tabs ? 'active' : ''}`}
                                        >{item.text}</li>
                                    )
                                })
                            }
                        </ul>
                    </Popup>
                </div>
                <ul>
                    {
                        foods && foods.map((item, index) => {
                            return (
                                <li
                                    key={index}
                                    className="active"
                                    onClick={getId.bind(this, item.id, index, item.text)}
                                >
                                    <div className="img">
                                        <img src={item.image} />
                                        {/* <div className="iconfont icon-duigou1"></div> */}
                                        <div className={`${item.checked == true ? 'iconfont icon-duigou1' : ''}`}></div>
                                    </div>

                                    <p>{item.text}</p>
                                </li>
                            )
                        })
                    }

                </ul>
                {
                    display ? (<div className="choose">
                        <p className="margin-top">选择2个或3个食材</p>
                        <p>乐厨告诉你可以做哪些菜</p>
                    </div>) : ("")
                }
                {
                    displays ? (<div className="choose choses">
                        <ul>
                            {
                                FoodId && FoodId.map(item => {
                                    return (
                                        <li key={item.id}>
                                            {item.name}
                                            <i className="iconfont icon-guanbi2fill" onClick={clear.bind(this, item.name, item.id)}></i>
                                        </li>

                                    )

                                })
                            }
                            {
                                addFlag ? (<li className="none" onClick={addFood}>
                                    <i className="iconfont icon-jiahao"></i>
                                </li>) : ("")

                            }
                        </ul>
                        {
                            someFoods && FoodsNum ? (<div className="title" onClick={open}>可做{someFoods.total}道菜</div>) : ("")
                        }
                    </div>) : ("")
                }

            </div>
            <Popup
                visible={visible5}
                mask={false}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    minHeight: '40vh',
                }}
            >
                <div className="chang-food">
                    <div className="top">
                        <ul>
                            {
                                FoodId && FoodId.map((item, index) => {
                                    return (
                                        <li key={index}>
                                            {item.name}
                                            <i className="iconfont icon-guanbi2fill" onClick={clear.bind(this, item.name, item.id)}></i>
                                        </li>
                                    )
                                })
                            }
                            {
                                addFlag ? (<li className="none" onClick={addFood}>
                                    <i className="iconfont icon-jiahao"></i>
                                </li>) : ("")

                            }


                        </ul>
                        {
                            someFoods ? (<div className="title"><span>可做{someFoods.total}道菜</span><div className="box" onClick={close}>
                                <i className="iconfont icon-guanbi"></i></div></div>) : ("")
                        }

                    </div>
                    <div className='m-choose-ctn'>
                        <ul>
                            {
                                someFoods && someFoods.data.map(item => {
                                    return (
                                        <li key={item.dishes_id}>
                                            <Link to={'/detailsvideo/' + item.dishes_id}>
                                                <div className="u-img">
                                                    <div className="u-gallery">
                                                        <img src={item.image} />
                                                        <i className='icon'></i>

                                                    </div>
                                                </div>
                                                <div className='u-info'>
                                                    <h2>{item.title}</h2>
                                                </div>
                                            </Link>
                                        </li>
                                    )
                                })
                            }
                            {/* <li>
                                <a href="">
                                    <div className="u-img">
                                        <div className="u-gallery">
                                            <img src="" />
                                            <i className='icon'></i>

                                        </div>
                                    </div>
                                    <div className='u-info'>
                                        <h2>123</h2>
                                    </div>
                                </a>
                            </li> */}
                        </ul>
                    </div>
                </div>
            </Popup>
        </div>
    )
}

export default Morecollocation;